<template>
    <el-row justify="center" class="row-bg" style="margin-top: 30px !important;">
        <!--穿梭框-->
        <el-col
                :span="12"
                :offset="0">
            <el-card style="text-align: center;">
                <el-transfer
                        filterable
                        filter-placeholder="试试搜索员工名称"
                        :titles="['待选人员', '已选人员']"
                        :button-texts="['移除员工', '添加员工']"
                        v-model="value"
                        :props="{
                          key: 'id',
                          label: 'userName'
                        }"
                        :data="data"
                        :format="{
                            noChecked: '${total}',
                            hasChecked: '${checked}/${total}'
                          }"
                >
                    <template #default="{option}">
                        <span>{{ option.userId }} - {{ option.userName }}</span>
                    </template>
                </el-transfer>
            </el-card>
        </el-col>

        <!--树形组件-->
        <el-col
                :span="10"
                :offset="1">
            <el-card>
                <el-scrollbar height="400px">
                    <el-alert title="已选人员的权限会重新赋予所选权限" type="warning" close-text="知道了" show-icon
                              style="line-height: 12px;"></el-alert>
                    <!--展开全部，父子不关联，有父子展开一定的有key,props设置显示格式，label,children-->
                    <el-tree
                            :data="permTreeData"
                            show-checkbox
                            node-key="id"
                            ref="permTree"
                            :check-strictly="true"
                            :default-expand-all=true
                            :expand-on-click-node="false"
                            :check-on-click-node="true"
                            :props="defaultProps">
                    </el-tree>
                </el-scrollbar>
            </el-card>
        </el-col>
    </el-row>
    <el-row class="row-bg" justify="center" style="margin-top: 60px!important;" v-if="hasAuth('sys:perm:list')">
        <el-col :span="3">
            <el-popconfirm title="这是确定要批量授权吗？" @confirm="submit" confirmButtonText="是的" cancelButtonText="再看看">
                <template #reference>
                    <el-button type="success" slot="reference" :disabled="btnState">保存</el-button>
                </template>
            </el-popconfirm>
        </el-col>
        <el-col :span="3">
            <el-button type="info" @click="reset">重置</el-button>
        </el-col>
    </el-row>
</template>

<script>
    export default {
        name: 'jurisdiction',
        data() {
            return {

                //树形组件的数据
                permTreeData: [],
                //树形组件数据渲染的格式
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },

                data: [],
                value: [],


            }
        },
        methods: {
            reset(){
                this.value=[]
                this.$refs.permTree.setCheckedKeys([])

            },
            submit(){
                let userMenuIds = {
                    userIds : this.value,
                    menuIds :  this.$refs.permTree.getCheckedKeys()
                }
                this.$axios.post("/sys/user/permBatch",userMenuIds).then(res => {
                    this.$message({
                        showClose: true,
                        message: '恭喜你，操作成功',
                        type: 'success'
                    });
                    this.$store.commit("changeRouteStatus", false)
                    this.reset()
                })
            }
        },
        created() {
            // 用于树形组件的数据渲染
            this.$axios.get("/sys/menu/list").then(res => {
                this.permTreeData = res.data.data
            })
            //用于穿梭框的渲染
            this.$axios.get("/sys/user/listAll").then(res => {
                this.data = res.data.data
            })
        },
        computed: {
            btnState: function () {
                return this.value.length === 0
            }
        }
    }
</script>


<style scope>
    .el-transfer__buttons {
        padding: 20px !important;
    }

    .el-transfer__buttons .is-with-texts {
        height: 40px;
        display: block !important;;
        line-height: 40px;
        padding: 0 20px;
        margin: 10px 0 !important;
    }

    .el-transfer-panel__list.is-filterable {
        width: 220px;
        height: calc(var(--el-transfer-panel-body-height) - var(--el-transfer-filter-height) + 90px)
    }

    .el-transfer-panel {
        width: 220px;
        height: 400px;
    }
</style>
